<template>
	<div class="textbook_box">
		<el-form :model="editForm" ref="editForm" :inline="true" >
			<el-row>
				<el-col :span="4">
					<el-form-item label="教材名称：" prop="textbookName">
						<div class="text-ellipsis">{{ editForm.textbookName }}</div>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="专业：" prop="majorId">
						<div class="text-ellipsis"><span v-for="item in majors" v-if="item.id == editForm.majorId">{{
							item.name }}</span></div>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="版本号：" prop="version">
						<div class="text-ellipsis">{{ editForm.version }}</div>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="状态：" prop="state">
						<div class="text-ellipsis"><span v-for="item in states" v-if="item.value == editForm.state">{{
							item.label }}</span></div>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="创建人：" prop="createUserName">
						<div class="text-ellipsis">{{ editForm.createUserName }}</div>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="textbook_new_tree">
			<div class="textbook_new_tree_head">
				<span> 教材目录<span >（{{ treeNum }}章）</span></span>
			</div>
			<div class="textbook_new_tree_body">
				<div class="textbook_new_tree_body_search">
					<el-input v-model="chapterName" size="small" placeholder="请输入章名称搜索"
						style='width: calc(100% - 75px);' clearable />
					<div class="data_btn r add" @click='getTreeList'>
						<i class="el-icon-search" />搜索
					</div>
				</div>
				<div class="textbook_new_tree_body_list beautifulScroll">
					<div class="textbook_new_tree_body_empty" v-if="treeList.length == 0">
						<div class="textbook_new_tree_body_emptycont">
							<img src="@/assets/images/textbook_new_tree_body_emptycont.png" alt="">
							<div>暂无教材章节~</div>
							
						</div>
					</div>
					<div class="data_card_list" v-for="chapter in treeList">
						<div class="chapter_text">
							<div class="chapter_text_in">
								<div class="chapter_text_all text-ellipsis" @click.stop="changeOpen(chapter)">
									<span class="chapter_text_allicon">
										<i class="el-icon-arrow-right "
											v-show="!openChapters.includes(chapter.textbookChapterId)"></i>
										<i class="el-icon-arrow-down "
											v-show="openChapters.includes(chapter.textbookChapterId)"></i>
									</span>
									<span class="chapter_text_span">
										<i class="el-icon-folder-opened" />
									</span>
									<div class="text-ellipsis pointer " v-if="chapter.pieceName">
										{{ chapter.pieceName }}
									</div>
									<div class="text-ellipsis pointer">
										{{ chapter.chapterName }}
									</div>
								</div>
							</div>
							
						</div>
						<div class="section_text_all" v-show="openChapters.includes(chapter.textbookChapterId)"
							v-if="chapter.sectionDirectoryDtos && chapter.sectionDirectoryDtos.length">
							<div class="section_text" v-for="section in chapter.sectionDirectoryDtos"
								:class="(openInfo.chapterSectionId == section.chapterSectionId ? 'active' : '')">
								<span class="chapter_text_allicon">
									<i class="el-icon-collection-tag" />
								</span>
								<div class="section_text_in">
									<div class="chapter_text_all text-ellipsis"
										@click.stop="openInfoSection(chapter, section)">
										{{ section.sectionName }}
									</div>
								</div>
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="textbook_new_cont">
			
			<div class="textbook_new_tree_head">
				详情：{{ openInfo.sectionName || '-' }}
			
			</div>
			<div class="textbook_new_cont_body">
				<div class="textbook_new_tree_body_back" v-show="!openInfo.chapterSectionId">
					<img src="@/assets/images/textbook_new_tree_body.png" class="textbook_new_tree_body_back">
					<div class="textbook_new_tree_body_backinfo">
						<div>查看<span>教材章节内容</span>需要先选择左侧课程小节</div>
						
					</div>
				</div>
				<div class="textbook_new_tree_body_right state3" 
					v-show="openInfo.chapterSectionId">
					<div class="textbook_page" v-for='(content, index) in openList' :key="content.sectionContentId">
						<div class="textbook_pagecont">
							<div class="textbook_pageitem ql-editor use" v-html="content.contentHtml"></div>
						</div>
						<div class="textbook_pagenum">第{{ content.page }}页</div>
					</div>
				</div>
				
			</div>
		</div>
		<el-row :gutter="10" class="textbook_info" v-show="false">
			<el-col :span="8" class="textbook_right_scroll beautifulScroll">
				<div class="data_btns">
					教材目录（{{ treeNum }}章）
					<el-input v-model="chapterName" size="small" placeholder="请输入章名称搜索" style='width: 200px;'
						clearable />
					<div class="data_btn r add" @click='getTreeList'>
						<i class="el-icon-search" />搜索
					</div>
				</div>
				<div class="data_card_list" v-for="chapter in treeList">
					<div class="chapter_text">
						<div class="chapter_text_in">
							<div class="chapter_text_all text-ellipsis" @click.stop="changeOpen(chapter)">
								<i class="el-icon-arrow-right chapter_text_allicon"></i>
								<span class="chapter_text_span">
									<i class="el-icon-folder-opened" />
								</span>
								<div class="text-ellipsis pointer " v-if="chapter.pieceName">
									{{ chapter.pieceName }}
								</div>
								<div class="text-ellipsis pointer">
									{{ chapter.chapterName }}
								</div>
							</div>
						</div>
					</div>
					<div class="section_text_all" v-show="openChapters.includes(chapter.textbookChapterId)"
						v-if="chapter.sectionDirectoryDtos && chapter.sectionDirectoryDtos.length">
						<div class="section_text" v-for="section in chapter.sectionDirectoryDtos"
							:class="openInfo.chapterSectionId == section.chapterSectionId ? 'active' : ''">
							<div class="chapter_text_in">
								<div class="chapter_text_all text-ellipsis"
									@click.stop="openInfoSection(chapter, section)">
									{{ section.sectionName }}
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="16" class="textbook_right_scroll border" v-if='openInfo.chapterSectionId'>
				<div class="textbook_top">
					详情：{{ openInfo.sectionName }}
				</div>
				<div class="textbook_cont">
					
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
import EditorMore from "@/components/Editor/index.vue";
import { putProgress } from "@/utils/oss.js";
import { majorList } from '@/api/major.js'
import { selectTextbookDetail, selectTextbookChapterCount, selectTextbookDirectory, updateTextbook, saveTextbookChapter, updateTextbookChapter, removeTextbookChapter, saveTextbookChapterSection, updateTextbookChapterSection, removeTextbookChapterSection, saveTextbookChapterSectionContent, updateTextbookChapterSectionContent, removeTextbookChapterSectionContent, selectTextbookContentList } from "@/api/textbook.js"
export default {
	components: {
		EditorMore
	},
	data() {
		var checkNumber = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('请填写数字'));
			} else if (isNaN(Number(value))) {
				return callback(new Error('请填写数字'));
			} else if (!Number.isInteger(Number(value))) {
				return callback(new Error('请输入整数'));
			} else {
				return callback();
			}
		};
		return {
			chapterName: '',
			openInfo: {
				textbookChapterId: '',
				chapterName: '',
				pieceName: '',
				chapterSectionId: '',
				sectionName: '',
				beforeSectionId: '',
			},
			openList: [],
			openChapters: [],
			treeList: [],
			treeNum: 0,
			dataloading: false,
			textbookId: this.$route.query.textbookId,
			majors: [],
			states: [{
				value: 1,
				label: "启用"
			}, {
				value: 2,
				label: "禁用"
			}],
			editForm: {
				textbookId: '',
				textbookName: '',
				majorId: '',
				version: '',
				state: '',
				prefaceHtml: '',
				textbookCover: '',
			},
		}
	},
	created() {
		this.getMajorList()
		this.getTreeList()
		this.getDateList()
	},
	methods: {
		openInfoSection(chapter, section) {
			if (this.sectionEdited) {
				this.$alert('您还有小节未保存，请保存后再进行此操作！', '提示', {
					type: 'warning'
				})
				return
			}
			this.openList = [];
			this.openInfo.textbookChapterId = chapter.textbookChapterId;
			this.openInfo.chapterName = chapter.chapterName;
			this.openInfo.pieceName = chapter.pieceName;
			this.openInfo.chapterSectionId = section.chapterSectionId;
			this.openInfo.sectionName = section.sectionName;
			selectTextbookContentList({
				chapterSectionId: section.chapterSectionId
			}).then(res => {
				this.openList = res.data || [];
			})
		},
		changeOpen(chapter) {
			if (this.openChapters.includes(chapter.textbookChapterId)) {
				var sliceIndex = this.openChapters.indexOf(chapter.textbookChapterId);
				this.openChapters.splice(sliceIndex, 1)
			} else {
				this.openChapters.push(chapter.textbookChapterId)
			}
		},
		getMajorList() {
			majorList({}).then(res => {
				this.majors = res.data || []
			})
		},
		getTreeList() {
			selectTextbookDirectory({
				textbookId: this.textbookId,
				chapterName: this.chapterName,
			}).then(async res => {
				this.treeList = res.data.chapterDirectoryDtos || [];
			});
			selectTextbookChapterCount({
				textbookId: this.textbookId,
			}).then(async res => {
				this.treeNum = res.data || 0;
			});
		},
		getDateList() {
			selectTextbookDetail({
				textbookId: this.textbookId
			}).then(async res => {
				this.editForm = Object.assign({}, res.data);
			});

		},
		closeCheck() {
			var view = this.$route;
			this.$store.dispatch('tagsView/delView', view).then(({
				visitedViews
			}) => {
				if (this.isActive(view)) {
					this.toLastView(visitedViews, view)
				}
			})
		},
		isActive(route) {
			return route.path === this.$route.path
		},
		toLastView(visitedViews, view) {
			const latestView = visitedViews.slice(-1)[0]
			if (latestView) {
				this.$router.push(latestView)
			} else {
				if (view.name === 'Dashboard') {
					this.$router.replace({
						path: '/redirect' + view.fullPath
					})
				} else {
					this.$router.push('/')
				}
			}
		},
	},
}
</script>